import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {IndexDiyModuleGood} from 'src/utils/server.interface'
import {View, ScrollView, Image, Text, Navigator} from '@tarojs/components'
import {gotoPage} from '../../utils/tools'
import RightArrow from '../../components/icon/right-arrow'
import Float from '../../components/float/float';
import './swiper-recommend.scss'

interface Type {
  title: string
  data: IndexDiyModuleGood[]
  clickMore: any
  showBg: boolean
  showLabel: boolean
  showMore?: boolean
}

export default class SwiperRecommend extends Component<Type> {
  static defaultProps = {
    title: '推荐',
    data: [],
    clickMore: () => {
    },
    showBg: false,
    showLabel: false,
    showMore: true
  }

  goto(value) {
    gotoPage(value.url)
  }

  more() {
    this.props.clickMore()
  }

  render() {
    const {showBg, title, showMore, showLabel, data} = this.props
    return (
      <View className='swiperRecommendRoot' style={showBg ? `background: white;` : ''}>
        {(title || showMore) && <View className='title-box'>
          <View className='title'>{title}</View>
          {showMore && <View className='more' onClick={this.more.bind(this)}>
            <Text>更多</Text>
            <View className='icon'><RightArrow /></View>
          </View>}
        </View>}
        {!title && !showMore && <View style='height: 10px' />}
        <View className='content-box'>
          {data.length > 0 && <ScrollView enable-flex scrollX className='scroll-view'>
            <View className='scroll' style={showLabel ? 'padding-top: 20rpx;' : ''}>
              {data.map((item: any, index) => <View key={item.id} className='scroll-item' onClick={()=>{Taro.navigateTo({url: item.url})}}>
                <View className='box'>
                  <View className='img-box'><Image src={(item.main_img || item.img) + '?x-oss-process=image/resize,w_300'}
                    mode='aspectFill' className='img'
                  /></View>
                  <View className='swiper-recommend-price-box'>
                    <View className='title'
                      style='font-size: 14px; font-weight: bold;'
                    >{item.name}</View>
                    {!item.price ?
                      <View className='snapped-up' style='position: relative; top: -3px;max-width: 80px;margin-left: 6px'>去看看</View>
                      :
                      <View className='price'><Text className='symbol m-min-big'>¥</Text>
                        <View className='number inline'>
                          <Float value={item.price}
                            style='font-family: Avenir;position: relative; bottom: -6.1Px !important;'
                          />
                        </View>
                        {/*<Text className="tips" style="margin-right: 5px;">起</Text>*/}
                        {(!!item.discount || item.is_activity == 1) &&
                        <Text
                          className='shangxin-today-block-item-bottom-box swiper-recommend-discount'
                        >{item.is_activity == 1 ? '拼团价' : `${item.discount}折`}</Text>}
                        {(!!item.market_price || !!item.marketPrice) && <View
                          className='shangxin-today-block-item-bottom-original inline m-min-b-market'
                        ><Text>￥</Text>{item.market_price || item.marketPrice}
                        </View>}
                      </View>
                    }
                  </View>
                </View>
                {showLabel && <View className='label'>TOP<Text className='number'>{index + 1}</Text></View>}
              </View>)}
            </View>
          </ScrollView>}
        </View>
      </View>
    )
  }
}
